﻿<script setup lang="ts" name="Watermark">
import useWatermark from '@/hooks/watermark'
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const { loadWatermark, removeWatermark } = useWatermark()
const searchData = ref({
  watermark_x: 40,
  watermark_y: 40,
  watermark_x_space: 100,
  watermark_y_space: 100,
  watermark_width: 200,
  watermark_height: 100,
  watermark_alpha: 0.15,
  watermark_angle: 15,
  watermark_color: '#000000',
  watermark_fontsize: '18px',
  watermark_txt: 'vue-admin-system',
  watermark_parent_node: null
})
const createdBodyWatermark = () => {
  searchData.value.watermark_parent_node = null
  loadWatermark(searchData.value)
}
const createdElementWatermark = () => {
  searchData.value.watermark_parent_node = 'elementWatermark'
  loadWatermark(searchData.value)
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="anchor-wrap no-border no-radius">
      <el-form label-position="top">
        <div class="el-form-group">
          <el-form-item label="水印起始X轴位置"><el-input-number v-model="searchData.watermark_x" :min="10" :max="200" :step="10" style="width: 120px" /></el-form-item>
          <el-form-item label="水印起始Y轴位置"><el-input-number v-model="searchData.watermark_y" :min="10" :max="200" :step="10" style="width: 120px" /></el-form-item>
        </div>
        <div class="el-form-group">
          <el-form-item label="水印X轴间距"><el-input-number v-model="searchData.watermark_x_space" :min="10" :max="200" :step="10" style="width: 120px" /></el-form-item>
          <el-form-item label="水印Y轴间距"><el-input-number v-model="searchData.watermark_y_space" :min="10" :max="200" :step="10" style="width: 120px" /></el-form-item>
        </div>
        <div class="el-form-group">
          <el-form-item label="水印宽度"><el-input-number v-model="searchData.watermark_width" :min="10" :max="400" :step="10" style="width: 120px" /></el-form-item>
          <el-form-item label="水印高度"><el-input-number v-model="searchData.watermark_height" :min="10" :max="200" :step="10" style="width: 120px" /></el-form-item>
        </div>
        <div class="el-form-group">
          <el-form-item label="水印透明度"><el-input-number v-model="searchData.watermark_alpha" :min="0" :max="1" :step="0.05" style="width: 120px" /></el-form-item>
          <el-form-item label="水印旋转角度"><el-input-number v-model="searchData.watermark_angle" :min="0" :max="360" :step="5" style="width: 120px" /></el-form-item>
        </div>
        <div class="el-form-group">
          <el-form-item label="水印颜色"><el-color-picker v-model="searchData.watermark_color" style="width: 120px" /></el-form-item>
          <el-form-item label="水印字号"><el-input v-model="searchData.watermark_fontsize" style="width: 120px" /></el-form-item>
        </div>
        <div class="el-form-group">
          <el-form-item label="水印内容"><el-input type="textarea" resize="none" v-model="searchData.watermark_txt" style="width: 360px; height: 104px;" /></el-form-item>
        </div>
        <div class="el-form-group">
          <el-button type="primary" @click="createdBodyWatermark">创建页面水印</el-button>
          <el-button type="primary" @click="createdElementWatermark">创建局部水印</el-button>
          <el-button type="danger" @click="removeWatermark">清除水印</el-button>
        </div>
      </el-form>
      <div class="element-watermark" id="elementWatermark">局部水印</div>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}

.element-watermark {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  overflow: hidden;
  background-color: var(--el-color-primary-light-9);
}

.el-form {
  .el-form-group {
    float: left;

    .el-form-item {
      :deep(.el-form-item__content) {
        .el-textarea {
          .el-textarea__inner {
            height: 100%;
          }
        }
      }
    }

    .el-button {
      display: block;
      margin-top: 30px;
      margin-left: 6px;
    }

    .el-button+.el-button {
      margin-top: 6px;
    }
  }
}
</style>
